<template>
  <div class="trade-container">
    <div style="background-color: #ffffff;margin-bottom: 10px">
      <el-button type="primary" @click="addFieldInfo">添加字段</el-button>
    </div>
    <div>
      <el-table ref="multipleTable"
                :data="tableData.data"
                tooltip-effect="dark"
                stripe
                highlight-selection-row
                max-height="750"
                style="width: 100%">
        <el-table-column prop="beiZhu" label="字段备注" fixed="right"></el-table-column>
        <el-table-column prop="notes" label="字段名称" fixed="right"></el-table-column>
        <el-table-column prop="notesEn" label="字段名称英文" fixed="right"></el-table-column>
        <el-table-column prop="fieldName" label="字段别名" fixed="right"></el-table-column>
        <el-table-column prop="fieldType" label="字段类型" fixed="right"></el-table-column>
        <el-table-column prop="isFlag" label="字段是否必填" fixed="right">
          <template #default="scope">{{scope.row.isFlag === '0' ? '必填':'不必填'}}</template>
        </el-table-column>
        <el-table-column prop="state" label="字段状态" fixed="right">
          <template #default="scope">{{scope.row.state === '0' ? '正常':'关闭'}}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-link type="warning" style="margin-right: 10px" @click="editFieldClick(scope.row)">修改</el-link>
            <el-link type="danger" @click="delField(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 30px">
        <el-pagination style="margin-left: auto" background layout="prev, pager, next" :page-size="pageSize" :total="pageTotal" @current-change="currentChange" />
      </div>
    </div>
  </div>
  <addField v-if="showAddField" :fieldData="fieldData.data" @showAddFieldEmit="showAddFieldEmit"></addField>
</template>

<script setup>
import { ref, reactive } from "vue";
import {_delField, _delOptionList, _getFieldList} from "../../http/api.js";
import {useRouter} from "vue-router";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import addField from './addField.vue'

const router = useRouter();
const loginId = sessionStorage.getItem('loginId');
const exhibitionId = sessionStorage.getItem('projectId');
const pageSize = ref(15);
const pageTotal = ref(0);
let pageIndex = ref(1);
if(!loginId||!exhibitionId) {
  ElMessage({message: '操作异常', type: 'error' });
  localStorage.clear();
  sessionStorage.clear();
  router.replace({ path: '/'})
}
const tableData = reactive({ // 表格数据
  data:[]
})
const showAddField = ref(false); // 添加字段显示
const fieldData = reactive({ // 选择的字段详情
  data:{}
})
// 获取字段列表
const getFieldList = () => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'})
  let params = {
    current: pageIndex.value,
    size: pageSize.value
  }
  _getFieldList(params)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let item = res.data.data;
          pageTotal.value = item.total;
          tableData.data = item.records;
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
      })
}
getFieldList();
// 分页点击
const currentChange = (index) => {
  pageIndex.value = index;
  getFieldList();
}
// 修改字段点击
const editFieldClick = (item) => {
  fieldData.data = item;
  showAddField.value = true;
}
// 添加字段
const addFieldInfo = () => {
  showAddField.value = true;
}
// 监听添加字段弹框关闭
const showAddFieldEmit = () => {
  showAddField.value = false;
  fieldData.data = {};
  getFieldList();
}
// 删除字段点击
const delField = (id) => {
  ElMessageBox.confirm('删除该字段?','提示', {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'})
      .then(() => {
        _delField(id)
            .then(res => {
              console.log(res);
              if(res.data.ok) {
                ElMessage({ type: 'success', message: '删除成功', })
                getFieldList();
              }
            })
            .catch(err => {
              console.log(err);
            })
      })
      .catch(() => {})
}
</script>

<style lang="scss" scoped>
.trade-container{
  padding: 10px;
}
.icon-style{
  font-size: 24px;
  cursor: pointer;
}
.face-img-box{
  width: 50px;
  height: 65px;
}
</style>
